<template>
	<div id="find">
		<ul id="findContent" v-for="(item,index) in find" :key="index">
			<div class="findImg">
				<img :src="item.cover" style="width: 100%; height: 100%;" />
			</div>
			<div class="findText">
				<div class="findTitle">
					<p> {{item.title}}</p>
				</div>
				<div class="findPrice" style="margin-top:5px;">
					<p  style="color: red;">{{item.price}}</p>
				</div>
			</div>
			<div class="commodityTextBottom" style="display:flex; font-size: 12px; color: gray; position: relative; margin-top: 5px;">
				<div id="mallNames" style="margin-left:5px;">{{item.mallName}}</div>
				<span style="position: absolute; right: 5px;">{{item.pubDate|formate}}</span>
			</div>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				find:[]
			}
		},
		mounted(){
			this.$http.get(this.$apis.Find).then((resp)=>{
				this.find = resp.data.data;
				console.log(this.find)
			})
		},
		filters:{
			formate(date){
				var d = new Date(date);
				return d.getMinutes()+"分钟前"
			}
		}
	}
</script>

<style lang="scss" scoped>
	#find{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		height: auto;
		#findContent{
			width: 50%;
			height: 250px;
			background: white;
			.findImg{
				width: 100%;
				height: 70%;
				padding: 10px;
				box-sizing: border-box;
			}
			.findText{
				width: 100%;
				height: 50px;
				.findTitle{
					width: 100%;
					height: 30px;
					font-size: 15px;
					line-height: 15.5px;
					text-overflow: ellipsis;
					overflow: hidden;
					display:block
				}
			}
		}
	}
</style>
